import Vue from 'vue'
import App from './App.vue'
import router from './router'
import Vant, { Toast } from 'vant'
import 'vant/lib/index.css'
// 引入请求库 axios
// 1. 引入库
import axios from 'axios'

Vue.use(Vant)

// 2. 注册到 Vue 原型上
Vue.prototype.$axios = axios
// 设置基地址,以后发送请求就不用带上这个了,也方便以后如果域名修改
axios.defaults.baseURL = 'http://127.0.0.1:3000'

// 同意设置请求拦截器
// 跟相应拦截器一样,只不过是request 而不是 response
// 另外拦截的也不是结果, 而是请求的设置
axios.interceptors.request.use(config => {
  // 判断如果本地储存有token 但是请求配置没有, 就要加上
  if (localStorage.getItem('token') && !config.headers.Authorization) {
    config.headers.Authorization = 'Bearer ' + localStorage.getItem('token')
  }
  // 跟响应拦截器一样, 拦住了就必须return放行
  return config
})

// 设置响应拦截器
// axios.interceptors.response.use() 这个函数可以拦截到所有请求的响应,并执行逻辑
// 我们需要将逻辑函数作为参数传入
axios.interceptors.response.use(res => {
  const { statusCode, message } = res.data
  console.log(message)

  if (statusCode === 401) {
    Toast.fail('用户信息校验失败, 重新登陆')
    localStorage.removeItem('token')
    localStorage.removeItem('userId')
    router.replace('/login')
  }

  return res
})

// 路由守卫
// 全局前置路由守卫,会在所有路由发生变化之前进行拦截
// 调用 router 的 beforeEach 方法
// router.beforeEach() 拦截所有跳转, 跳转之前都会执行一个函数, 我们要作为参数传进去
router.beforeEach((to, from, next) => {
  if (to.meta.auth) {
    const token = localStorage.getItem('token')
    if (token) {
      next()
    } else {
      router.push('/login')
    }
  } else {
    next()
  }
})

Vue.filter('fixImgUrl', function(url) {
  const fullUrlReg = /^http/
  if (fullUrlReg.test(url)) {
    return url
  } else {
    return axios.defaults.baseURL + url
  }
})

Vue.config.productionTip = false

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')
